<template>
    <base-modal class="fault-modal" :title="$t('faultLibrary.solution')" :show.sync="visible" width="600px">

        <form-view class="task-tab-container task-view-containner" :fields="fields" :value="form">
        
        </form-view>

        <div slot="footer" class="dialog-footer">
            <el-button type="plain-third" @click="visible = false">{{ $t('common.base.iKnow') }}</el-button>
        </div>
    </base-modal>
</template>
  
<script>
// util
import MsgModel from '@model/MsgModel';
import { message } from '@src/util/message';
import * as FormUtil from '@src/component/form/util';
// api
import { solutionGetData, solutionGetFields } from '@src/api/Fault';

export default {
    name: 'choose-fault-detail-dialog',
    data() {
        return {
            pending: false,
            visible: false,
            fields: [],
            form: {}
        }
    },
    methods: {
        /**
        * @description 打开添加备件弹窗
        */
        async open(id = '') {
            this.pending = false;
            this.visible = true;

            await this.getSolutionFields();
            await this.getFaultDetail(id);
        },
        /**
        * @description 关闭添加备件弹窗
        */
        close() {
            this.visible = false;
        },
        // 表单获取
        async getSolutionFields() {
            try {
                const res = await solutionGetFields();
                if(!MsgModel.isSuccess(res)) return message.error(res.message);

                this.fields = res.data || [];
            } catch (e) {
                console.log('librarySelect: ', e);
            }
        },
        async getFaultDetail(id) {
            try {
                const params = {
                    solutionId: id
                }
                const res = await solutionGetData(params);
                if(!MsgModel.isSuccess(res)) return message.error(res.message);
                
                const { data = {} } = res;
                const form = {
                    ...data,
                    ...data.attribute,
                    solution_desc: data.solutionDesc || ''
                };

                this.form = await FormUtil.initRichTextContent(this.fields, form);
            } catch (e) {
                console.log('librarySelect: ', e);
            }
        }
    },
}
</script>
  
<style lang="scss" scoped>
.fault-modal {
    ::v-deep .base-modal-body {
        padding: 16px !important;
    }

    .btn-group {
        text-align: center;
        margin-top: 16px;

        .el-button {
            width: 72px !important;
            border-radius: $button-radius-base;
        }
    }
}
</style>